import { getLyric } from '@/services/song'
import { computed, onMounted, watch, ref } from 'vue'
import { useStore } from 'vuex'
export function useEntire (song, progressvalue) {
  const scrollcontent = ref(null)
  const scrollref = ref(scroll)
  const store = useStore()
  const lyric = computed(() => store.state.lyric)
  const lyricindex = computed(() => store.state.lyricindex)
  onMounted(async () => {
    const lyric = await getLyric(song.value)
    store.commit('addsonglyric', { song: song.value, lyric })
    store.commit('changelyric', lyric)
    store.commit('changelyricindex', 0)
  })
  watch(song, async (newsong) => {
    const lyric = await getLyric(song.value)
    store.commit('addsonglyric', { song: song.value, lyric })
    store.commit('changelyric', lyric)
    store.commit('changelyricindex', 0)
  })
  watch(lyricindex, (newv) => {
    if (newv > 5) {
      scrollref.value.scroll.scrollToElement(
        scrollcontent.value.children[newv - 5],
        1000
      )
    } else {
      scrollref.value.scroll.scrollTo(0, 0, 1000)
    }
  })

  // 切换歌词和cd
  const currentview = ref('cd')
  const Rstyle = ref({})
  const Lstyle = ref({})
  const touches = {}
  const touchstartf = (e) => {
    touches.start = e.touches[0].pageX
  }
  const touchmovef1 = (e) => {
    let offset = e.touches[0].pageX - touches.start
    if (
      (offset > 0 && currentview.value === 'cd') ||
      (offset < 0 && currentview.value === 'lyric')
    ) {
      offset = 0
    }
    touches.offset = offset
    const precent = Math.abs(offset) / innerWidth
    touches.precent = precent
    Rstyle.value = {
      transform: `translateX(${
        currentview.value === 'cd'
          ? touches.offset
          : touches.offset - innerWidth
      }px)`
    }
    Lstyle.value = {
      opacity: currentview.value === 'cd' ? 1 - precent : precent
    }
  }
  const touchendf = (e) => {
    if (currentview.value === 'cd') {
      if (touches.precent > 0.7) {
        currentview.value = 'lyric'
        Rstyle.value = {
          transform: `translateX(${-innerWidth}px)`,
          transitionDuration: '300ms'
        }
        Lstyle.value = {
          opacity: 0
        }
      } else {
        currentview.value = 'cd'
        Rstyle.value = {
          transform: 'translateX(0px)',
          transitionDuration: '300ms'
        }
        Lstyle.value = {
          opacity: 1
        }
      }
    } else {
      if (touches.precent > 0.3) {
        currentview.value = 'cd'
        Rstyle.value = {
          transform: 'translateX(0px)',
          transitionDuration: '300ms'
        }
        Lstyle.value = {
          opacity: 1
        }
      } else {
        currentview.value = 'lyric'
        Rstyle.value = {
          transform: `translateX(${-innerWidth}px)`,
          transitionDuration: '300ms'
        }
        Lstyle.value = {
          opacity: 0
        }
      }
    }
  }
  return {
    lyric,
    lyricindex,
    scrollcontent,
    scrollref,
    Rstyle,
    Lstyle,
    touchstartf,
    touchmovef1,
    touchendf
  }
}
